<template>
    <div>
        <header>
            <Nav></Nav>
        </header>
        <div class="content">
            <!-- 总体介绍 -->
            <div class="infoBanner">
                <div class="infoText">
                    <h6 class="title">学生培养，面向应用</h6>
                    <div class="textmain">
                        <p>「网络应用软件技术重点实验室」孵化于重庆邮电大学，建立于xx年，研究成果显著，支持解决方案提供、软件定制研发、低代码平台研发、应用产品联创</p>
                        <p>打破传统复杂、低效、高投入的应用产品系统建设模式束缚，专注于做细分领域的一流技术与服务提供商</p>
                        <p style="margin-bottom: 30px">是网络应用软件技术创新和人才培养的重要基地</p>
                        <p>「网络应用软件技术重点实验室」培养高素质创新人才，以学生培养，面向应用为团队使命</p>
                        <p>全面发展团队，完善专业知识体系，提升细分领域的一流技术和服务提供。</p>
                    </div>
                </div>
            </div>
            <!-- 背景介绍 -->
            <div class="bgBanner">
                <div class="infoText">
                    <h6 class="title">背景</h6>
                    <div class="textmain">
                        <div class="left-text">
                            <p class="left-title">网络应用软件技术重点实验室</p>
                            <div class="text-content">
                                <p>重庆邮电⼤学网络应用软件技术重点实验室着重于学生培养，面向应用，致力于做细分领域的一流技术与服务提供商，支持提供方案解决、软件定制研发、低代码平台研发、应用产品联创。
                                </p>
                                <p>现有院⼠1⼈、教授5⼈、研究生16人、本科生38人。</p>
                            </div>
                        </div>
                        <div class="right-pic">
                            <img src="../assets/images/about/banner2.jpg">
                        </div>

                    </div>
                </div>
            </div>
            <!-- 文化介绍 -->
            <div class="ctrBanner">
                <h6 class="title">文化</h6>
                <div class="textmain">
                    <div class="ctrcontent">
                        <div class="list ">
                            <h6>愿景</h6>
                            <p>做细分领域的一流技术与服务提供商</p>
                        </div>
                        <div class="list second">
                            <h6>使命</h6>
                            <p>学生培养，面向应用</p>
                        </div>
                        <div class="list third">
                            <h6>价值观</h6>
                            <p>赋能客户、务实高效、拥抱变化、合作共赢</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 资质介绍 -->
            <div class="qufBanner">
                <div class="infoText">
                    <h6 class="title">资质</h6>
                    <div class="textmain">
                        <div class="certificate">
                            <img src="../assets/images/about/banner4.png">
                            <div class="info">
                                <p class="ptop">高新技术企业</p>
                                <p class="pbottom">国家支持领域</p>
                            </div>
                        </div>
                        <div class="certificate">
                            <img src="../assets/images/about/banner4.png">
                            <div class="info">
                                <p class="ptop">高新技术企业</p>
                                <p class="pbottom">国家支持领域</p>
                            </div>
                        </div>
                        <div class="certificate">
                            <img src="../assets/images/about/banner4.png">
                            <div class="info">
                                <p class="ptop">高新技术企业</p>
                                <p class="pbottom">国家支持领域</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>

    </div>
</template>

<script>
import Footer from '../components/Footer.vue';
import Nav from "../components/Nav";

export default {
    name: 'aboutUs',
    components: { Footer, Nav }
}
</script>

<style lang="scss" scoped>
.content {
    height: 2330px;
    // background-color: red;

    .infoBanner {
        height: 500px;
        background: url('../assets/images/about/banner1.png') 67% center no-repeat;

        .infoText {
            width: 1100px;
            margin: 0 auto;
            text-align: center;
            color: #fff;

            .title {
                font-size: 2rem;
                font-weight: 700;
                padding-top: 75px;
            }

            .textmain {
                margin-top: 40px;
                font-size: 1rem;

                p {
                    margin-bottom: 0.4rem;
                }
            }
        }
    }

    .bgBanner {
        height: 610px;

        .infoText {
            width: 1100px;
            margin: 0 auto;
            color: #333;

            .title {
                height: 110px;
                padding-top: 70px;
                font-size: 2rem;
                font-weight: 700;
                text-align: center;
                line-height: 40px;
            }

            .textmain {
                height: 460px;
                margin-top: 40px;
                background-color: #fff;
                box-shadow: 2px 2px 8px rgb(0 0 0 / 16%);
                position: relative;

                .left-text {
                    width: 500px;
                    position: absolute;
                    left: 75px;
                    top: 120px;
                    color: #333;

                    .left-title {
                        height: 40px;
                        font-size: 1.6rem;
                        line-height: 40px;
                        margin-bottom: 20px;
                    }

                    .text-content {
                        font-size: 17px;

                        p {
                            margin-bottom: 15px;
                        }
                    }

                }

                .right-pic {
                    position: absolute;
                    right: 75px;
                    top: 60px;

                    img {
                        width: 335px;
                        height: 335px;
                    }
                }

            }
        }
    }

    .ctrBanner {
        height: 650px;

        .title {
            margin: 0 auto;
            height: 110px;
            padding-top: 70px;
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            line-height: 40px;
            color: #333;
        }

        .textmain {
            height: 500px;
            margin-top: 40px;
            background: url('../assets/images/about/banner3.png') 50% 100% no-repeat;
            position: relative;

            .ctrcontent {
                width: 1100px;
                height: 400px;
                left: 50%;
                top: 50%;
                position: absolute;
                transform: translate(-50%, -50%);

                .list {
                    margin-top: 35px;
                    color: #fff;
                    width: 360px;

                    h6 {
                        font-size: 1.6rem;
                        font-weight: 700;
                        line-height: 40px;
                    }

                    p {
                        margin-top: 15px;
                    }
                }
            }

        }
    }

    .qufBanner {
        height: 570px;

        .infoText {
            width: 1100px;
            margin: 0 auto;
            color: #333;

            .title {
                height: 110px;
                padding-top: 70px;
                font-size: 2rem;
                font-weight: 700;
                text-align: center;
                line-height: 40px;
            }

            .textmain {
                height: 460px;
                display: flex;
                justify-content: space-around;

                .certificate {
                    align-self: center;

                    img {
                        width: 270px;
                        height: 270px;
                    }

                    .info {
                        text-align: center;
                        margin-top: 30px;

                        .ptop {
                            height: 40px;
                            font-size: 1.6rem;
                            line-height: 40px;
                            margin-bottom: 15px;
                        }

                        .pbottom {
                            color: rgb(153, 153, 153)
                        }
                    }
                }
            }
        }
    }





}
</style>